<template>
  <div class="home-layout">
    <!-- 左侧导航栏 (可收缩) -->
    <aside class="left-nav-container" :style="{ width: isCollapsed ? '64px' : '220px' }">
      <div class="system-title" @click.stop="toHomeComponent">
        <h2 v-show="!isCollapsed">企业资源管理计划</h2>
        <p v-show="!isCollapsed">Enterprise Resource Planning</p>
      </div>
      <div class="menu-wrapper">
        <LeftNav @toggle-collapse="handleCollapse" />
      </div>
    </aside>

    <!-- 右侧主内容区 -->
    <div class="right-main-container" :style="{ marginLeft: isCollapsed ? '64px' : '220px' }">
      <!-- 顶部导航栏 -->
      <header class="top-nav-container">
        <TopNav />
      </header>

      <!-- 标签页导航 -->
      <div class="tabs-container" v-if="showTabs">
        <TabsNav />
      </div>

      <!-- 引入内容组件 -->
      <main class="page-content">
        <router-view v-slot="{ Component }" :key="$route.fullPath">
          <transition name="fade-transform" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import LeftNav from '@/components/LeftNav.vue'
import TopNav from '@/components/TopNav.vue'
import TabsNav from '@/components/TabsNav.vue'

const router = useRouter()
const isCollapsed = ref(false)
const showTabs = ref(true) // 控制是否显示标签页

function toHomeComponent() {
  router.push('/')
}

function handleCollapse(collapsed) {
  isCollapsed.value = collapsed
}
</script>

<style scoped>
.home-layout {
  display: flex;
  min-height: 100vh;
  background: #f5f7fa;
  position: relative;
  overflow: hidden;
  height: 100vh;
}

/* 左侧导航栏容器 (可收缩) */
.left-nav-container {
  width: 220px;
  background: linear-gradient(180deg, #066981 0%, #044b5f 100%);
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
}

/* 菜单包装器 - 实现独立滚动 */
.menu-wrapper {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

/* 自定义滚动条样式 */
.menu-wrapper::-webkit-scrollbar {
  width: 6px;
}

.menu-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.menu-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.system-title {
  padding: 20px;
  color: white;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  transition: all 0.3s;
}

.system-title h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  transition: all 0.3s;
}

.system-title p {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 5px;
  transition: all 0.3s;
}

/* 右侧主容器 (包含顶部栏和内容区) */
.right-main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  margin-left: 220px;
  transition: all 0.3s;
}

/* 顶部导航栏容器 */
.top-nav-container {
  height: 64px;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 900;
  flex-shrink: 0;
}

/* 标签页容器 */
.tabs-container {
  background: #fff;
  padding: 0 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  z-index: 800;
}

/* 页面内容区域 */
.page-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: #f5f7fa;
}

.system-title {
  cursor: pointer;
  user-select: none;
}

/* 页面切换动画 */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.3s;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>